<template>
    <div class="hello-ezuikit-js">
        <video class="myPlayer" :id="'myPlayer' + vedioUrl.id" poster="" controls playsInline webkit-playsinline>
            <source
                :src="vedioUrl.url"
                type="application/x-mpegURL"
                style="width:100%;height:100%"
            />
        </video>
        <!-- <div class="btn-container">
            <button id="init" @click="play()">播放</button>
            <button id="stop" @click="pause()">暂停</button>
        </div> -->
    </div>
</template>

<script>
import "./ezuikit";
import EZUIKit from "ezuikit-js";
export default {
    name: "EZUIKITwo",
    watch: {
        vedioUrl: {
            deep: true,
            handler(newValue, oldValue) {
                console.log('新的值',newValue)
            },
        },
    },
    props: {
        vedioUrl: {
            type: Object,
            default() {
                return {}
            }
        },
    },
    data() {
        return {
            player: null
        }
    },
    computed: {
        accessToken() {},
    },
    mounted() {

        console.group("mounted 组件挂载完毕状态===============》");
        let that = this;

        this.$nextTick(() => {
            // const init = document.querySelector("#init");
            // const url = document.querySelector("#url");
            // const myPlayer = document.querySelector("#myPlayer");
            // const stop = document.querySelector("#stop");
            // init.addEventListener("click", () => {
            //     // let urlAdress = url.value.trim();
            //     // myPlayer.setAttribute("src", urlAdress);
            //     var player = new EZUIPlayer("myPlayer");
            //     player.play();
            //     // 日志
            //     // player.on("log", log);
            //     // function log(str) {
            //     //     var div = document.createElement("div");
            //     //     div.innerHTML =
            //     //         new Date().Format("yyyy-MM-dd hh:mm:ss.S") +
            //     //         JSON.stringify(str);
            //     //     document.body.appendChild(div);
            //     // }
            //     stop.addEventListener("click", () => {
            //         player.pause();
            //     });
            // });
            console.log('数据',this.vedioUrl)
            this.player = new EZUIPlayer('myPlayer' + this.vedioUrl.id);
        });

        // let all = document.getElementById("video-container");
        // let iframe = all.children[0];
    },
    methods: {
        play() {
            console.log('执行')
            this.player.play()
        },
        pause() {
            this.player.pause()
        }
    }
};
</script>
<style scoped>
.hello-ezuikit-js {
    width: 24rem;
    height: 20rem;
}
.myPlayer {
    width: 100%;
    height: 100%;
}
</style>
